<template>
  <div id="adminDrawer">
    <v-navigation-drawer
      id="app-drawer"
      :mini-variant.sync="mini"
      fixed
      :dark="$vuetify.dark"
      app
      v-model="drawer"
      width="260"
    >
      <v-toolbar color="primary darken-1" dark>
        <img :src="computeLogo" height="36" alt="LABLOG ADMIN">
        <v-toolbar-title class="ml-0 pl-3">
          <span class="hidden-sm-and-down">LABLOG ADMIN</span>
        </v-toolbar-title>
      </v-toolbar>
      <vue-perfect-scrollbar class="drawer-menu--scroll" :settings="scrollSettings">
        <v-list dense expand>
          <template v-for="(menu, menuIndex) in menus">
            <!--group with subitems-->
            <v-list-group
              v-if="menu.children"
              :key="menuIndex"
              :group="menu.group"
              :prepend-icon="menu.icon"
              no-action="no-action"
            >
              <v-list-tile slot="activator" ripple="ripple">
                <v-list-tile-content>
                  <v-list-tile-title>{{ menu.title }}</v-list-tile-title>
                </v-list-tile-content>
              </v-list-tile>
              <template v-for="(subMenu, subMenuIndex) in menu.children">
                <!--sub group-->
                <v-list-group
                  v-if="subMenu.children"
                  :key="subMenuIndex"
                  :group="subMenu.group"
                  sub-group="sub-group"
                >
                  <v-list-tile slot="activator" ripple="ripple">
                    <v-list-tile-content>
                      <v-list-tile-title>{{ subMenu.title }}</v-list-tile-title>
                    </v-list-tile-content>
                  </v-list-tile>
                  <v-list-tile
                    v-for="(grandMenu, grandMenuIndex) in subMenu.children"
                    :key="grandMenuIndex"
                    :to="routerTo(grandMenu)"
                    :href="grandMenu.href"
                    ripple="ripple"
                    exact="exact"
                  >
                    <v-list-tile-content>
                      <v-list-tile-title>{{ grandMenu.title }}</v-list-tile-title>
                    </v-list-tile-content>
                  </v-list-tile>
                </v-list-group>
                <!--child item-->
                <v-list-tile
                  v-else
                  :key="subMenuIndex"
                  :to="routerTo(subMenu)"
                  :href="subMenu.href"
                  :target="subMenu.target"
                  :disabled="subMenu.disabled"
                  ripple="ripple"
                  exact="exact"
                >
                  <v-list-tile-content>
                    <v-list-tile-title>
                      <span>{{ subMenu.title }}</span>
                    </v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
              </template>
            </v-list-group>
            <v-subheader v-else-if="menu.header" :key="menuIndex">{{ menu.header }}</v-subheader>
            <v-divider v-else-if="menu.divider" :key="menuIndex"></v-divider>
            <!--top-level link-->
            <v-list-tile
              v-else
              :to="routerTo(menu)"
              ripple="ripple"
              :target="menu.target"
              :href="menu.href"
              rel="noopener"
              :key="menu.name"
              exact="exact"
            >
              <v-list-tile-action v-if="menu.icon">
                <v-icon>{{ menu.icon }}</v-icon>
              </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>{{ menu.title }}</v-list-tile-title>
              </v-list-tile-content>
            </v-list-tile>
          </template>
        </v-list>
      </vue-perfect-scrollbar>
    </v-navigation-drawer>
  </div>
</template>
<script>
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
import menus from '@/api/admin/drawer-menus'
export default {
  name: 'admin-drawer',
  components: {
    VuePerfectScrollbar
  },
  props: {
    expanded: {
      type: Boolean,
      default: true
    }
  },
  data: () => ({
    mini: false,
    drawer: true,
    menus: menus,
    scrollSettings: {
      maxScrollbarLength: 160
    }
  }),
  computed: {
    computeGroupActive () {
      return true
    },
    computeLogo () {
      return 'https://cdn.vuetifyjs.com/images/logos/v-alt.svg'
    },

    sideToolbarColor () {
      return this.$vuetify.options.extra.sideNav
    }
  },
  methods: {
    routerTo (item) {
      if (item.href) return
      if (item.to) {
        return {
          name: item.to
        }
      } else {
        return { name: 'dashboard' }
      }
    }
  },
  created () {
    window.getApp.$on('APP_DRAWER_TOGGLED', () => {
      this.drawer = !this.drawer
    })
  }
}
</script>

<style lang="less">
#appDrawer {
  overflow: hidden;

  .drawer-menu--scroll {
    height: calc(100vh - 48px);
    overflow: auto;
  }
}
</style>
